import styles from "./index.module.less";
import { memo, useState } from "react";
import AMap from "@/components/AMap";
import { yawToAngle } from "@/utils/utils";
import CarList from "./components/CarList";
import TaskPie from "./components/TaskPie";
import Alert from "./components/Alert";
import MidModule from "./components/MidModule";
import Header from "./components/Header";
import useWebSocket from "@/store/hooks/useWebSocket";

const Dashboard = () => {
	const [realTimeMarkers, setRealTimeMarkers] = useState<any[]>([]); // 多个车辆实时位置

	useWebSocket({
		url: `wss://software.hugesuccess.cn/ws/realtimeAll`,
		onMessage: data => {
			// console.log("Received data:==========", data);

			// 处理多个车辆数据
			if (Array.isArray(data)) {
				const markers = data
					.filter(vehicle => {
						// 只处理有位置数据且在线或包含实时数据的车辆
						return vehicle.online || vehicle.data?.longitude || vehicle.data?.latitude;
					})
					.map(vehicle => {
						// 获取位置数据，优先使用 data 中的实时数据
						const positionData = vehicle.data || vehicle;
						const longitude = positionData.longitude;
						const latitude = positionData.latitude;

						// 如果没有位置数据，跳过
						if (!longitude || !latitude) {
							return null;
						}
						return {
							id: vehicle.id || vehicle.vehId,
							position: [longitude, latitude],
							title: vehicle.plateNo || "车辆",
							icon: "/images/icon-map-car.png",
							hoverText: `${vehicle.plateNo || "车辆"} - ${vehicle.remark || ""}`,
							angle: yawToAngle(positionData.yaw, "deg"),
							vehicleInfo: {
								plateNo: vehicle.plateNo,
								vin: vehicle.vin,
								soc: positionData.soc,
								speed: positionData.speed,
								yaw: positionData.yaw,
								vehicleStatus: positionData.vehicleStatus,
								taskStatus: positionData.taskStatus,
								anomalousStatus: positionData.anomalousStatus,
								supplier: vehicle.supplier,
								remark: vehicle.remark,
								online: vehicle.online,
								updateTime: vehicle.updateTime
							},
							infoWindow: {
								content: `
									<div style="padding: 8px; min-width: 200px;">
										<div style="font-weight: bold; margin-bottom: 8px;">${vehicle.plateNo || "车辆"}</div>
										<div style="margin-bottom: 4px;">VIN: ${vehicle.vin || "-"}</div>
										<div style="margin-bottom: 4px;">供应商: ${vehicle.supplier || "-"}</div>
										<div style="margin-bottom: 4px;">备注: ${vehicle.remark || "-"}</div>
										<div style="margin-bottom: 4px;">状态: ${vehicle.online ? "在线" : "离线"}</div>
										${positionData.soc !== undefined ? `<div style="margin-bottom: 4px;">电量: ${positionData.soc}%</div>` : ""}
										${
											positionData.speed !== undefined
												? `<div style="margin-bottom: 4px;">速度: ${Number(positionData.speed).toFixed(2)} km/h</div>`
												: ""
										}
										<div style="margin-bottom: 4px;">更新时间: ${vehicle.updateTime || "-"}</div>
									</div>
								`,
								showOnHover: true,
								offset: [0, -30]
							}
						};
					})
					.filter(marker => marker !== null); // 过滤掉无效的标记

				setRealTimeMarkers(markers);
			} else if (data && data.longitude && data.latitude) {
				// 兼容单个车辆数据的情况
				setRealTimeMarkers([
					{
						position: [data.longitude, data.latitude],
						title: data.plateNo || "车辆实时位置",
						icon: data.icon || "/images/icon-map-car.png",
						hoverText: data.plateNo || "车辆实时位置",
						angle: yawToAngle(data.yaw, "deg"),
						vehicleInfo: {
							plateNo: data.plateNo,
							vin: data.vin,
							soc: data.soc,
							speed: data.speed,
							yaw: data.yaw,
							vehicleStatus: data.vehicleStatus,
							taskStatus: data.taskStatus,
							anomalousStatus: data.anomalousStatus
						}
					}
				]);
			}
		}
	});

	return (
		<div className={styles.container}>
			<div className={styles.mapContent}>
				<AMap mapStyle={"blue"} realTimeMarkers={realTimeMarkers} />
			</div>
			<Header type="main" />
			<MidModule />
			<div className={styles.leftModule}>
				<TaskPie boxClass="task" />
				<Alert />
			</div>
			<div className={styles.rightModule}>
				<CarList realTimeMarkers={realTimeMarkers} />
			</div>
		</div>
	);
};
export default memo(Dashboard);
